<template>
  <a-drawer v-model:open="open" :mask-closable="false" class="custom-class" root-class-name="root-class-name"
    width="50%" :title="props.type == 'add' ? '新增' : '编辑'" placement="right" @close="closebtn">
    <a-form ref="formRef" :model="formState.info" :rules="rules" layout="vertical">
      <a-form-item ref="cover" label="封面" name="cover">
        <uploadImg v-model:value="formState.info.cover" />
      </a-form-item>
      <a-form-item ref="title" label="名称" name="title">
        <a-input v-model:value="formState.info.title" />
      </a-form-item>
      <a-form-item ref="description" label="描述" name="description">
        <a-textarea v-model:value="formState.info.description" :rows="4" placeholder="请输入备注" />
      </a-form-item>
      <a-form-item ref="categoryIds" label="分类" name="categoryIds">
        <a-cascader v-model:value="formState.info.categoryIds" style="width: 100%" max-tag-count="responsive"
          :options="optinoslist" placeholder="请选择分类"></a-cascader>
      </a-form-item>
      <a-form-item ref="contentValueType" label="类型" name="contentValueType">
        <a-radio-group v-model:value="formState.info.contentValueType" name="radioGroup">
          <a-radio :value="1">视频</a-radio>
          <a-radio :value="2">文章</a-radio>
          <a-radio :value="3">问答</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item ref="contentValue" label="视频" name="contentValue" v-if="formState.info.contentValueType == 1">
        <uploadUrl v-model:value="formState.info.url" />

      </a-form-item>
      <a-form-item ref="url" label="内容" name="url" v-else>
        <editorView v-model:value="formState.info.contentValue" />
      </a-form-item>


    </a-form>
    <template #footer>
      <div style="display: flex; justify-content: flex-end">
        <a-button style="margin-right: 8px" @click="closebtn">取消</a-button>
        <a-button type="primary" :loading="loading" @click="infobtn">确定</a-button>
      </div>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch, inject } from "vue";

import { message } from "ant-design-vue";

import * as api from "#/api/core/nutrition";
import uploadImg from "#/components/uploadImg/index.vue";
import uploadUrl from '#/components/uploadUrl.vue';
import editorView from '#/components/editorView.vue'




const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "add",
  },
  editdata: {
    type: Object,
    default: () => { },
  },
  catelist: {
    type: Array,
    default: () => [],

  }
});

const emits = defineEmits(["update:value", "submit", "close"]);


const optinoslist = computed({
  get() {
    return props.catelist
  }
})



const formRef = ref();
const rules = {
  name: [
    {
      required: true,
      message: "请输入名称",
      trigger: "change",
    },
  ],
  categoryId: [
    {
      required: true,
      message: "请选择分类",
      trigger: "change",
    },
  ],

};

const formState = reactive({
  info: {
    cover: '',
    categoryIds: [],
    title: "",
    contentValue: '',
    url: [],
    contentValueType: 1,
    description: ''
  },
});

const loading = ref(false);

watch(
  () => props.value,
  async (newV) => {
    console.log("props", props.editdata);

    if (newV && props.type == "update") {


      try {
        let temp = await api.$getmaterdesc(props.editdata.id, {})


        formState.info.cover = props.editdata?.cover,
          formState.info.title = props.editdata?.title
        formState.info.description = props.editdata?.description
        formState.info.categoryIds = props.editdata?.categories.map((e: any) => {
          return e.categoryId
        })
        formState.info.contentValueType = props.editdata?.valueType
        formState.info.url = [{
          name: '文件',
          url: temp?.content?.value,
        }]
        formState.info.contentValue = temp?.content?.value
        console.log('回显', formState.info);

      } catch { }





    } else {
      formState.info.cover = ''
      formState.info.title = ''
      formState.info.description = ''
      formState.info.categoryIds = []
      formState.info.contentValueType = 1
      formState.info.url = []
      formState.info.contentValue = ''

    }
  },
  {
    immediate: true,
  }
);

const open = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
  },
});



const infobtn = () => {
  console.log("info", formState.info);


  let url = formState.info.url.length ? formState.info.url[0]?.url : ''


  let info = {
    cover: formState.info.cover,
    categoryIds: formState.info.categoryIds,
    title: formState.info.title,
    contentValueType: formState.info.contentValueType,
    description: formState.info.description,
    contentValue: formState.info.contentValueType == 1 ? url : formState.info.contentValue
  }

  console.log('提交', info);

  formRef.value
    .validate()
    .then(async () => {
      loading.value = true;
      try {
        if (props.type == "add") {
          await api.$createmater({
            ...info
          });
          message.success("添加成功");

          open.value = false;
          loading.value = false;
          emits("submit");
        } else {
          await api.$updatemater(
            {
              ...info
            },
            props.editdata?.id
          );
          message.success("编辑成功");
          loading.value = false;

          open.value = false;
          emits("submit");
        }
        // debugger
      } catch (error) {
        console.log("error", error);
      }
    })
    .catch((error: any) => {
      console.log("error", error);
    });
};

const closebtn = () => {
  open.value = false;
  // formState.info.name = "";
  // formState.info.description = "";
  // formState.info.icon = "";
  emits("close");
};
</script>
